<script setup lang="ts">
import SideBar from './components/SideBar/index.vue'
import ChatBox from './components/ChatBox/index.vue'

import {useUserStore} from '/@/store'

import {defineComponent, watch, onMounted} from 'vue'

import {ref} from 'vue'

const centerDialogVisible = ref(false)

const store = useUserStore();

/**
 * 登录用户
 */
const login = () => {
    centerDialogVisible.value = false
    store.login(form.value.username, form.value.password);
}

interface formType {
    username: string,
    password: string
}

const form = ref<formType>({
    username: "",
    password: ""
})

onMounted(() => {
    form.value.username = "admin"
    form.value.password = "123"
    login()
})

</script>

<template>
    <div class="chat">
        <div class="chat-card">
            <el-container>
                <el-aside  class="aside" width="70px">
                    <SideBar></SideBar>
                </el-aside>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </div>

        <el-dialog v-model="centerDialogVisible" title="登录账户" width="30%" center>
            <el-form :model="form" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"/>
                </el-form-item>

                <el-form-item label="密码">
                    <el-input v-model="form.password"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="login">
                    登录
                  </el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<style scoped lang="scss">
.aside{
    padding: 0;
}
.chat {
  background-color: #f3f3f3;
  height: 100%;
  min-width: 1200px;
  width: calc(100vw - 400px);
  margin: 0 auto;
}

.chat-card {
  width: 100%;
  min-height: 500px;
  padding: 0;
  display: flex;
  margin: 0 auto;
}

.row {
  height: 100%;
}

.main {
  padding: 0;
}
</style>